@css {
  blockquote.M{
    text-shadow: 1px -1px 0 #eee;
    --c:#fe0;
    background: linear-gradient(#fff, color-mix(in lch, var(--c) 10%, #fffff9));
    border-radius: 8px;
    border: 2px solid var(--c);
    box-shadow: 0 0 3px inset color-mix(in lch,var(--c),#666);
    color: #000;
    font-weight: 500;
    margin: 1.5rem auto;
    padding: .5rem 1.5rem;
  }
}

blockquote
  &.M strong
    font-weight 800

  &.M>ul
    margin-left 1.5rem

  &.M>ul>li:before
    margin-left -1.3rem

  &.M:before
    opacity 1

  &.M:after
    display none

  &.M:before
    background var(--svgTIP) 0 0 / cover repeat-y
    content ''
    height 32px
    left -14px
    position absolute
    top -14px
    width 32px

  &.WARN:before
    background-image var(--svgWARN)

  &.WARN
    color #e60
    --c #f70

  &.NOTE:before
    background-image var(--svgNOTE)

  &.NOTE
    color #060
    --c #97CF4E

  &.M+&.M
    margin-top 1.5rem
